<!DOCTYPE html>
<html>

<head>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>唯品会购物车</title>
        <link rel="stylesheet" href="../css/gouwuche.css">
    </head>
</head>

<body>
    <header>
        <div id="version">
            <div id="version_left">
                <img src="../img/cartHeader.png">
            </div>
            <div id="version_right">
                <div id="version_right_top">
                    <span>你好，189*****7</span>
                    <a href="">[退出]</a>
                    <a href="">订单管理</a><em>|</em>
                    <p>400-6789-888</p><em>|</em>
                    <p>在线客服</p><em>|</em>
                    <p>会员服务</p>
                </div>
                <div id="version_right_bottom">
                    <ul>
                        <li><span class="span1"></span>
                            <p>100% 正品保证</p>
                        </li>
                        <li><span class="span2"></span>
                            <p>七天无理由放心退</p>
                        </li>
                        <li><span class="span3"></span>
                            <p>限时抢购</p>
                        </li>
                    </ul>
                </div>

            </div>


        </div>
    </header>
    <main>
        <div id="sale">
            <a href="#">特卖商品</a>
        </div>
        <div id="deli">
            <span>配送至<em>西安市</em></span>
            <div id="check">
                勾选商品“√”即可锁定库存20分钟，倒计时内不用担心商品被抢走～
            </div>
        </div>


        <ul>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>

        <div id="ziying">
            <td>唯品自营</td>
        </div>
        <div id="table">
            <!-- <table>
                <tr>
                    <td>
                        <div class="check">
                            <input type="checkbox">
                        </div>
                        <div class="imgs">
                            <img src="${date[i].goodsImg}">
                        </div>
                        <div class="miaoshu">
                            <p class="miaoshu_1">100 </p>
                            <p class="chima">尺码：XL</p>
                        </div>
                    </td>
                    <td>￥100</td>
                    <td>
                        <div class="td3">
                            <a href="#" class="jian" abcd=001 onclick="jianhao(this)">-</a>
                            <div class="shuliang">
                               1
                            </div>
                            <a href="#" class="jia"  onclick="jiahao(this)" abcd=${date[i].goodsId}>+</a>
                        </div>
                    </td>
                    <td> <p onclick="delet(this)"  abc=${date[i].goodsId}>删除</p></td>
                </tr>
            </table> -->
        </div>
        

    </main>
    <div class=".x">
        <!-- <div id="foot_left">
            请在倒计时前结束
        </div>
        <div id="foor_money">
            总金额（未含运费）：<span>￥<em>0</em></span>
        </div>
        <div id="jiesuan">
            立即结算
        </div> -->
    </div>


   <div class="x"></div>
   <!-- //底部 -->
    <footer>

    </footer>
</body>

</html>
<script src="../js/jQuery.js"></script>

  
<!-- <script>
    $("footer").load("footer.html")
</script> -->
<script>
    function getCookie(value) {
        var cookie = document.cookie;// username=zhangsan; sex=男; age=18
        var arr = cookie.split('; ');// ['username=zhangsan','sex=男','age=18']
        for (var i in arr) {//item  'username=zhangsan'    'sex=男'    'age=18'
            var newarr = arr[i].split('=');//第一项 ["username",'zhangsan']      第二项 ...  ['sex','男']
            if (newarr[0] == value) {
                return newarr[1]; //如果存在value， 说明 newarr[1]就想要的结果  return 终止函数的执行
            }
        }
        return '';
    }

    $.get('../goodsAndShoppingCart/getShoppingCart.php', { vipName: getCookie('username') }, function (data) {
        let str = ''
        let str1 = '';
        
        //小计

        console.log(data);
        let dataa = JSON.parse(data)
        console.log(dataa);
        dataa.forEach(element => {
            let xiaoJi = element.goodsPrice * element.goodsCount
            // //总价
            // totalMoney += xiaoJi
            str += `
            <table>
                <tr>
                    <td>
                     
                        <div class="imgs">
                            <img src="${element.goodsImg}">
                        </div>
                        <div class="miaoshu">
                            <p class="miaoshu_1">${element.goodsPrice} </p>
                            <p class="chima">尺码：${element.beiyong13}</p>
                        </div>
                    </td>
                    <td >￥<span class="span">${element.goodsPrice}</span></td>
                   
                    <td>
                        <div class="td3">
                            <a href="#" class="jian" abcd=001 onclick="jianhao(this,${element.goodsId})">-</a>
                            <div class="shuliang">
                                ${element.goodsCount}
                            </div>
                            <a href="#" class="jia"  onclick='jiahao(this,${element.goodsId})' >+</a>
                        </div>
                    </td>
                    <td class="boxx">${xiaoJi}</td>
                    <td> <p  onclick="del(this)"  abc=${element.goodsId}>删除</p></td>
                </tr>
            </table>

            `

        });
        str1 += `<div id="foot_left">
                请在倒计时前结束
            </div>
            <div id="foor_money">
                总金额（含运费）：<span >￥<em class="em"></em></span>
            </div>
            <div id="jiesuan">
                立即结算
            </div>`
        $("#table").html(str)
        $(".x").html(str1)
          $(".em").html(setprice())    
    })

    //减号
    function jianhao(btn, goodsId) {
        let count = parseInt(btn.nextElementSibling.innerHTML)
        count--;
        if (count <= 1) {
            count = 1
        }
        $.get('../goodsAndShoppingCart/updateGoodsCount.php', { vipName: getCookie('username'), goodsId: goodsId, goodsCount: count }, function (data){
            if(data==1){
                // let total=0
                btn.nextElementSibling.innerHTML = count
                 let danjia=btn.parentNode.parentNode.previousElementSibling. firstElementChild.innerHTML;
                btn.parentNode.parentNode.nextElementSibling.innerHTML=btn.nextElementSibling.innerHTML *danjia;
                // setprice()
                $(".em").html(setprice())    
                
                
            }

        })
    };
    //加号
    function jiahao(btn, goodsId) {
        let count = parseInt(btn.previousElementSibling.innerHTML)
        count++;
        if (count <= 1) {
            count = 1
        }
        $.get('../goodsAndShoppingCart/updateGoodsCount.php', { vipName: getCookie('username'), goodsId: goodsId, goodsCount: count }, function (data){
            if(data==1){
                let total=0
                btn.previousElementSibling.innerHTML = count
                 let danjia=btn.parentNode.parentNode.previousElementSibling. firstElementChild.innerHTML;
                btn.parentNode.parentNode.nextElementSibling.innerHTML=btn.previousElementSibling.innerHTML *danjia;
                // setprice()
                $(".em").html(setprice())    
                
                
            }

        })
    };




   function setprice() {
            let price = $(".boxx")
            let num = 0;
            for (let i = 0; i < price.length; i++) {
                num += price[i].innerHTML / 1
            }
            // let toprice = $(".em")
            // toprice.innerHTML = num;
            return num
        }

   
//删除
function del(obj){
    console.log($(obj).attr("abc"));
    if(confirm('亲，删了可就没有了哦')){
        obj.parentNode.parentNode.parentNode.remove()
        $.get('../goodsAndShoppingCart/deleteGoods.php',{
        vipName:getCookie('username'),
        goodsId :$(obj).attr('abc')
    },function(data){
        if(data=='1'){
            $(".em").html(setprice())  
           alert("已删除")
        }
    })
    }
    
}


</script>
<script>
    $('footer').load("footer.html")
  </script>